<script setup lang="ts">

import Beehive, {Beeswax, Chamber, Honey} from "@/modal/Beehive";
import {computed, type Reactive, reactive} from "vue";
import BaseType from "@/components/BeehiveType/BaseType.vue";
import BeeswaxType from "@/components/BeehiveType/BeeswaxType.vue";
import HoneyType from "@/components/BeehiveType/HoneyType.vue";
import ChamberType from "@/components/BeehiveType/ChamberType.vue";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import Action from "@/modal/Action";
import {ActionName} from "@/components/type";

const action = reactive(Action.getInstance());

const beehive: Reactive<Beehive> = reactive(new Beehive());
const beeswax: Reactive<Beeswax> = reactive(new Beeswax());
const honey: Reactive<Honey> = reactive(new Honey());
const chamber: Reactive<Chamber> = reactive(new Chamber());
const isBaseComplete = computed(() => {
  return beehive.currentStep === beehive.baseRipen;
});
const growUpBase = (modal: Beehive) => {
  if (action.beehiveTimes === 0) return;
  if (!modal.isRipen) {
    modal.growUp(modal).getAward();
    action.useAction(ActionName.BEEHIVE);
  }
}
const growUpProduct = (modal: Beehive) => {
  if (action.beehiveTimes === 0) return;
  if (isBaseComplete.value && !modal.isRipen) {
    modal.growUp(modal).getAward();
    action.useAction(ActionName.BEEHIVE);
  }
}
</script>

<template>
  <div class="beehive col-12 h-100">
    <div class="title">
      <icon-font :icon-type="IconType.BEEHIVE"
                 :color="IconColor.BEEHIVE"
                 :is-desc="true"
                 font-size="xx-large">
        <template #description>蜂巢</template>
      </icon-font>
    </div>
    <div class="nest container-fluid col-9">
      <div class="nest-item beeswax">
        <beeswax-type :beeswax="beeswax"
                      @emit-grow-up="growUpProduct"
        ></beeswax-type>
      </div>
      <div class="nest-item honey">
        <div>
          <honey-type :honey="honey"
                      @emit-grow-up="growUpProduct"
          ></honey-type>
        </div>
      </div>
      <div class="nest-item chamber">
        <chamber-type :chamber="chamber"
                      @emit-grow-up="growUpProduct">
        </chamber-type>
      </div>
    </div>
    <div class="base container-fluid col-6">
      <div>
        <base-type :beehive="beehive"
                   @emit-grow-up="growUpBase"
        ></base-type>
      </div>
    </div>
  </div>
</template>

<style scoped>
.beehive {
  display: flex;
  flex-direction: column;
}

.title {
  display: flex;
  height: 40px;
}

.nest {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(49% - 20px);
}

.base {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: calc(51% - 20px);
  left: -13.5%;
}

.nest-item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.nest-item:nth-child(2) {
  left: -20px;
}

.nest-item:nth-child(3) {
  left: -20px;
}

</style>